<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo16-渲染函数-创建带slot的节点</title>
</head>
<script src="../libs/vue.js"></script>
<style>
    .container{
        width: 100%;
        min-width: 320px;
        max-width: 640px;

        margin:0 auto;
    }
</style>
<body> 
    <div id="app">
      <my-heading>
        <span>这里该有sec title</span>
        <my-sec-title></my-sec-title>
      </my-heading>
    </div>
</body>

<script>


Vue.component('my-sec-title', {
  render: function (createElement) {
    return createElement(
      'h5' ,
      this.secTitle
    )
  },
  data:function(){
    return {
      secTitle:'这是二级标题'
    }
  }
});


Vue.component('my-heading', {
  render: function (createElement) {
      // console.log(this.$slots);
      var nextElment = this.$slots.default;
      console.log(nextElment);

      var roNode = this.rootNode;
    return createElement(
      roNode , 
      // {'data':'asdfasd'},    // 父传值必须是 string ？？？
      {
        style:{
          color:'red' 
        }
      },
      /* 
      这里就是data！！！ 我擦！是这么个意思！
      因为parent node中有slot default，而且无值，所以子组件、子内容会填充。
      当下方内容节点输入值时（即parent node传入值时），子组件、子dom内容被屏蔽。
      这个传值的问题  好有迷惑性。

      父传值必须是 string ？？？
      */
      // 'asdfasd',   
      [
        nextElment
      ]
    )
  },
  data:function(){
    return {
      rootNode : 'h1',
      blogTitle:'主 title'
    }
  }
});




var app = new Vue({
  el: '#app'
});
</script>
</html>